---
menu: 表单项
name: Datetime 日期时间
route: /component/formFields/datetime
---

import { useState } from "react"
import { Playground, Props } from "docz";
import Datetime, {PropsType} from "./index";
import Form from "../../../steps/form";

# Datetime 日期时间表单项
表单项内的日期时间选项。

## 何时使用
表单内需要设置日期时间选项时。<br/>
提供了以下可配置项：
- 展示格式设置: `YYYY-MM-DD HH:mm:ss`
- 表单提交数据格式化: `YYYY-MM-DD HH:mm:ss`
- 默认值：默认值支持五种获取方式


## 如何使用
### 配置化JSON参考
`config`中`fields`为表单项配置信息
```
  fields:[
    {
      label: "开始时间",
      field: "datetime",
      type: "datetime",
      default: {
        type: "static",
        value: "2020-01-01"
      }
    }
  ]
```

## 代码演示

### 组件单独调用
<Playground>
  {() => {
    const [ value, setValue ] = useState("1")

    return (
      <Datetime
        value={value}
        onChange={(value) => setValue(value)}
      />
    )
  }}
</Playground>

#### 在表单中使用

<Playground>
  <Form layout="horizontal" 
    config={{
      fields: [
        {
          label: "开始时间",
          field: "type",
          type: "datetime",
          type: "datetime"
        }
      ]
    }}
    onSubmit={()=>{}}
    onUnmount={()=>{}}
    onMount={()=>{}}
    ref={(form) => {
      form.willMount()
    }}
  />
</Playground>

### 设置默认值

<Playground>
  <Form
    config={{
      fields: [
        {
          label: "开始时间-默认值",
          field: "datetime",
          type: "datetime",
          default: {
            type: "static",
            value: "2020-01-01"
          }
        }
      ]
    }}
    onSubmit={()=>{}}
    onUnmount={()=>{}}
    onMount={()=>{}}
    ref={(form) => {
      form.willMount()
    }}
  />
</Playground>

### 格式化展示

<Playground>
  <Form
    config={{
      fields: [
        {
          label: "开始时间-格式化",
          field: "datetime",
          type: "datetime",
          format: "YYYY/MM/DD",
          default: {
            type: "static",
            value: "2020-01-01"
          }
        }
      ]
    }}
    onSubmit={()=>{}}
    onUnmount={()=>{}}
    onMount={()=>{}}
    ref={(form) => {
      form.willMount()
    }}
  />
</Playground>

### 格式化展示 - 设置日期选项面板
*设置对应的 `mode` 必须与`format`相匹配，否则会出现意想不到的错误*
```
  mode: "year"  < --- > format: "YYYY"
  mode: "month"  < --- > format: "MM" ｜ "YYYY-MM"
  mode: "time"  < --- > format: "HH:mm:ss"
```
<Playground>
  <Form
    config={{
      fields: [
        {
          label: "设置面板(年）",
          field: "datetime",
          type: "datetime",
          format: "YYYY",
          mode: "year"
        },
        {
          label: "设置面板(月）",
          field: "datetime",
          type: "datetime",
          format: "MM",
          mode: "month"
        },
        {
          label: "设置面板(时间）",
          field: "datetime",
          type: "datetime",
          format: "HH:mm:ss",
          mode: "time"
        },
      ]
    }}
    onSubmit={()=>{}}
    onUnmount={()=>{}}
    onMount={()=>{}}
    ref={(form) => {
      form.willMount()
    }}
  />
</Playground>

### 提交值格式化

<Playground>
  <Form
    config={{
      fields: [
        {
          label: "开始时间",
          field: "datetime",
          type: "datetime",
          submitFormat: "YYYY-MM"
        }
      ]
    }}
    onSubmit={()=>{}}
    onUnmount={()=>{}}
    onMount={()=>{}}
    ref={(form) => {
      form.willMount()
    }}
  />
</Playground>

### 接口获取默认值

<Playground>
  <Form
    config={{
      fields: [
        {
          label: "开始时间",
          field: "datetime",
          type: "datetime",
          default: {
            type: "interface",
            api: {
              url: "http://j-api.jd.com/mocker/data?p=263&v=POST&u=list.do",
              method: "GET",
              contentType: "json",
              withCredentials: true
            },
            apiResponse: "result.0.datetime"
          }
        }
      ]
    }}
    onSubmit={()=>{}}
    onUnmount={()=>{}}
    onMount={()=>{}}
    ref={(form) => {
      form.willMount()
    }}
  />
</Playground>

## APIs

 <Props of={PropsType} />
